<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>诊断页面 - 智能医疗系统</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container mt-4">
  <h2 class="mb-4">诊断详情</h2>

  <div v-if="appointment" class="card">
    <div class="card-body">
      <h5>患者：{{ appointment.patient.username }}</h5>
      <p>预约时间：{{ formatDate(appointment.schedule.scheduleDate) }} {{ appointment.schedule.timeSlot }}</p>

      <div class="mb-3">
        <label>诊断结果：</label>
        <textarea v-model="diagnosis" class="form-control"></textarea>
      </div>

      <div class="mb-3">
        <label>选择药品：</label>
        <select v-model="selectedMeds" multiple class="form-control">
          <option v-for="med in medicines" :value="med.id" :disabled="med.stock < 1">
            {{ med.name }} (库存: {{ med.stock }})
          </option>
        </select>
      </div>

      <button @click="completeDiagnosis" class="btn btn-success">完成诊断</button>
    </div>
  </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      appointment: null,
      diagnosis: '',
      selectedMeds: [],
      medicines: []
    },
    mounted() {
      const appointmentId = new URLSearchParams(window.location.search).get('id');

      // 获取预约详情
      axios.get(`/api/appointments/${appointmentId}`)
              .then(res => this.appointment = res.data);

      // 获取药品列表
      axios.get('/api/medicines')
              .then(res => this.medicines = res.data);
    },
    methods: {
      completeDiagnosis() {
        if (!this.diagnosis) {
          alert('请填写诊断结果');
          return;
        }

        axios.post(`/api/appointments/${this.appointment.id}/diagnosis`, {
          diagnosis: this.diagnosis,
          medicines: this.selectedMeds
        }).then(() => {
          alert('诊断完成！');
          window.location.href = '/doctor.html';
        });
      },
      formatDate(dateStr) {
        return new Date(dateStr).toLocaleDateString();
      }
    }
  });
</script>
</body>
</html>